<template>
  <div class="pop-up-animation" v-if="visible">
    <el-card>
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div>鹿鲸伴聊小助手</div>
          <div style="cursor: pointer">
            <el-icon @click="onClose">
              <CloseBold />
            </el-icon>
          </div>
        </div>
      </template>
      <ClientOnly>
        <div style="height: 360px; width: 100%">
          <BubbleList :list="list" max-height="360px" v-if="show" />
        </div>
      </ClientOnly>
      <template #footer>
        <Sender placeholder="🔥🔥🔥请输入提问内容" :auto-size="{ minRows: 2, maxRows: 5 }" v-model="senderClearableValue" clearable @submit="handleSubmit" />
      </template>
    </el-card>
  </div>
  <div class="maxkb-chat-button" @click="onClick" v-if="!visible">
    <img style="height: 55px; width: 55px" src="https://maxkb.fit2cloud.com/ui/MaxKB.gif" />
  </div>
</template>
<script setup lang="ts">
import type { BubbleListItemProps } from 'vue-element-plus-x/types/BubbleList';
import { onMounted, ref } from 'vue';
import { Sender, BubbleList } from 'vue-element-plus-x';
import { nanoid } from 'nanoid';
defineOptions({
  name: 'DwConversationDialog',
});

function handleSubmit(value: string) {
  visible.value = true;
  setTimeout(() => {
    show.value = true;
    list.value = generateFakeItems(1);
  }, 1000);
}
const list = ref<listType[]>([]);
const senderClearableValue = ref('');
const visible = ref<boolean>(false);
const show = ref<boolean>(false);
const onClick = () => {
  visible.value = true;
  setTimeout(() => {
    show.value = true;
    list.value = generateFakeItems(15);
  }, 1000);
};

type listType = BubbleListItemProps & {
  key: string;
  role: 'user' | 'ai';
};
const messages: listType[] = [];
function generateFakeItems(count: number): listType[] {
  for (let i = 0; i < count; i++) {
    const role = i % 2 === 0 ? 'ai' : 'user';
    const placement = role === 'ai' ? 'start' : 'end';
    const content = role === 'ai' ? '💖 🥰 感谢使用鹿鲸低代码项目构建工具 ! 您的支持，是我们前进的最强动力 ~ 如果您有什么问题，可以直接向我提问.... ~' : `哈哈哈，让我试试`;
    const loading = false;
    const shape = 'corner';
    const variant = role === 'ai' ? 'filled' : 'outlined';
    const isMarkdown = false;
    const typing = role === 'ai' ? i === count - 1 : false;
    const avatar = role === 'ai' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : 'https://avatars.githubusercontent.com/u/76239030?v=4';

    messages.push({
      key: nanoid(), // 唯一标识
      role, // user | ai 自行更据模型定义
      placement, // start | end 气泡位置
      content, // 消息内容 流式接受的时候，只需要改这个值即可
      loading, // 当前气泡的加载状态
      shape, // 气泡的形状
      variant, // 气泡的样式
      isMarkdown, // 是否渲染为 markdown
      typing, // 是否开启打字器效果 该属性不会和流式接受冲突
      isFog: role === 'ai', // 是否开启打字雾化效果，该效果 v1.1.6 新增，且在 typing 为 true 时生效，该效果会覆盖 typing 的 suffix 属性
      avatar,
      avatarSize: '24px', // 头像占位大小
      avatarGap: '12px', // 头像与气泡之间的距离
    });
  }
  return messages;
}
const onClose = () => {
  visible.value = false;
};

onMounted(async () => {
  // const question = '你是谁？';
  // const response = await fetch('/admin-api/ai/agent/query/answer', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //     Accept: 'text/event-stream',
  //   },
  //   body: JSON.stringify({ question }),
  // });
  // const reader = response.body!.getReader();
  // const decoder = new TextDecoder();
  // let messages = '';
  // while (true && render) {
  //   const { done, value } = await reader.read();
  //   if (done) break;
  //   const chunk = decoder.decode(value);
  //   // 去除 data: 前缀
  //   const lines = chunk.split('\n');
  //   for (const line of lines) {
  //     if (line.startsWith('data:')) {
  //       const data = line.replace('data:', '').trim();
  //       if (data) {
  //         messages += data;
  //       }
  //     }
  //   }
  //   console.log(messages);
  // }
});
</script>
<style lang="scss" scoped>
.el-card__body {
  --el-card-padding: 0px;
}

.maxkb-chat-button {
  position: fixed;
  right: 10px;
  bottom: 25px;
  cursor: pointer;
  z-index: 10000;
}

.pop-up-animation {
  right: 10px;
  width: 500px;
  height: 300px;
  position: fixed;
  z-index: 999999;
  animation: slideUp 1s forwards;
  /* 动画名称，持续时间，以及动画执行完毕后保持最后一帧的状态 */
}

@keyframes slideUp {
  from {
    bottom: 50px;
    /* 从屏幕外底部开始 */
    opacity: 0;
    /* 初始透明度为0 */
  }

  to {
    bottom: 380px;
    /* 移动到屏幕底部 */
    opacity: 1;
    /* 最终透明度为1 */
  }
}
</style>
